<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing websockets</title>
<style>
fieldset div{height: 500px;overflow-y:auto;}
</style>
</head>
<body>
	<div>
	<form onsubmit="return send();">
		<input type="text" name="message" id="message" size="100" placeholder="消息内容"/>
		<input type="submit" id="btn-send" value="发送" style="disaply:none"/>
		<input type="button" id="btn-link" value="连接" onclick="link();"  style="disaply:none"/>
	</form>
	</div>
	<fieldset>
		<legend>历史记录</legend>
		<div id="messages"></div>
	</fieldset>
	<script type="text/javascript">
	var webSocket;
	var address = 'wss://cms.publiccms.com/message/test/12';

	function link(){
		if ('WebSocket' in window){
		 webSocket = new WebSocket(address);
		} else if ('MozWebSocket' in window){
		 webSocket = new MozWebSocket(address);
		}
		document.getElementById('btn-link').style.display='none';
	}
	link();

    webSocket.onerror = function(event) {
    	document.getElementById('messages').innerHTML += 'error:'+event.data;
    };

    webSocket.onopen = function(event) {
    	document.getElementById('messages').innerHTML = '连接服务器成功';
		document.getElementById('btn-send').style.display='inline-block';
    };

	webSocket.onclose = function(event) {
    	document.getElementById('messages').innerHTML += '<br />断开服务器';
		document.getElementById('btn-send').style.display='none';
		document.getElementById('btn-link').style.display='inline-block';
    };
    webSocket.onmessage = function(event) {
    	var message = event.data;
   		document.getElementById('messages').innerHTML += '<br />server:' + message;
   		document.getElementById('messages').scrollTop=document.getElementById('messages').scrollHeight;
    };

    function send(){
   		var message = document.getElementById('message').value;
   		webSocket.send(message);
   		document.getElementById('messages').innerHTML += '<br />i say:'+document.getElementById('message').value;
   		document.getElementById('message').value='';
   		document.getElementById('messages').scrollTop=document.getElementById('messages').scrollHeight;
		return false;
    }
  </script>
</body>
</html>